<template>
  <div
    style="
      width: 100vw;
      height: 100vh;
      overflow-y: auto;
      padding: 10px;
      box-sizing: border-box;
    "
  >
    <h3 style="color: #333; text-align: center; margin-bottom: 10px">
      码农果蔬调研表单
    </h3>

    <div style="width: 100%; height: 89%; overflow-y: auto; overflow-x: hidden">
      <el-row :gutter="12">
        <el-form :model="addForm" :rules="rules" ref="form">
          <el-col :span="24">
            <el-form-item label="地址" prop="address">
              <el-input
                placeholder="请输入调研地址"
                v-model="addForm.address"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-card
            class="box-card"
            v-for="(item, index) in addForm.kinds"
            :key="index"
          >
            <div slot="header" class="clearfix">
              <span>{{ item.kind }}</span>

              <el-button
                style="float: right; padding: 3px 0; margin-left: 10px"
                type="text"
                @click="delKinds(index)"
                >删除品种</el-button
              >

              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="addPrice(item)"
                >添加价格</el-button
              >
            </div>

            <el-form-item
              :label="`第${inx + 1}次问价`"
              v-for="(row, inx) in item.priceList"
              :key="inx"
            >
              <el-input v-model="row.price" type="number">
                <template slot="suffix">
                  <span @click="delPrice(item.priceList, inx)">删除</span>
                </template>
              </el-input>
            </el-form-item>
          </el-card>

          <div style="text-align: center">
            <el-button
              type="info"
              plain
              @click="addKinds"
              style="margin-bottom: 20px"
              >添加种类</el-button
            >
          </div>

          <el-col :span="24">
            <el-form-item label="本次调研意见" prop="opinion">
              <el-input
                placeholder="请输入本次调研意见"
                v-model="addForm.opinion"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <div style="text-align: center">
      <el-button type="primary" style="width: 100%" @click="confirmResult"
        >提交调研结果</el-button
      >
    </div>

    <el-dialog :visible.sync="isShowAddKinds" title="添加种类">
      <el-form>
        <el-form-item label="种类名称">
          <el-input v-model="kindName" placeholder="请输入种类名称"></el-input>
        </el-form-item>

        <div style="text-align: center">
          <el-button type="primary" @click="confirmAddKind">确定添加</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { saveInvestigate_survey } from "@/api/brogrammerGardenStuff";
import moment from "moment";
export default {
  data() {
    return {
      addForm: {
        kinds: [],
      },
      kindName: "",
      isShowAddKinds: false,

      rules: {
        address: [
          { required: true, message: "请输入调研地址", trigger: "blur" },
        ],

        opinion: [
          { required: true, message: "请输入调研意见", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 添加种类
    addKinds() {
      this.kindName = "";
      this.isShowAddKinds = true;
    },

    // 确定添加种类
    confirmAddKind() {
      if (!this.kindName) {
        this.$message.warning("请输入种类");
        return;
      }

      this.addForm.kinds.push({
        kind: this.kindName,
        priceList: [
          { price: 0, inquiryTime: moment().format("yyyy-MM-DD HH:mm:ss") },
        ],
      });

      this.isShowAddKinds = false;
    },

    // 删除品种
    delKinds(index) {
      this.$confirm("确定删除该种类的调研吗？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(() => {
        this.addForm.kinds.splice(index, 1);
      });
    },

    // 添加价格
    addPrice(item) {
      item.priceList.push({
        price: 0,
        inquiryTime: moment().format("yyyy-MM-DD HH:mm:ss"),
      });

      console.log(item.priceList, "item.priceList");
    },

    // 删除价格
    delPrice(item, index) {
      if (item.length == 1) {
        this.$message.warning("至少有一种价格调研");
        return;
      } else {
        item.splice(index, 1);
      }
    },

    // 提交调研结果
    async confirmResult() {
      console.log(this.addForm, "this.addForm");
      if (this.addForm.kinds.length == 0) {
        this.$message.warning("请添加调研种类后在试");
        return;
      }
      // 校验
      this.$refs.form.validate(async (flag) => {
        if (flag) {
          try {
            let result = await saveInvestigate_survey(this.addForm);
            if (result.code == 20000) {
              this.$message.success("调研结果保存成功");
              this.addForm = {
                kinds: [],
              };
            } else {
              this.$message.error(result.msg);
            }
          } catch (error) {
            this.$message.error(error);
          }
        }
      });
    },
  },
};
</script>

<style></style>
